<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
  </head>
  <body>
    <!-- 创建dom根节点 一个页面中需要 有一个根节点 这个节点下的内容就会被react所管理-->
    <div id="demoReact"></div>
    <script type="text/babel">
      // jsx = javascript xml 的扩展语法
      // 优点
      // 1.执行的效率更快
      // 2.他是类型安全的，编译的过程中就能及时的发现错误
      // 3.在使用jsx的时候编写模板会更加简单和快速
      let myDom = <h1>你好世界</h1>;
      ReactDOM.render(myDom, document.getElementById("demoReact"));
    </script>
  </body>
</html>
